new Vue({
    el: '#main-container',
    data: function () {
        return {
            setting: {  //ztree的配置对象
                data: {//ztree的数据配置对象
                    simpleData: { //设置简单节点数组配置
                        enable: true, //默认为false 设置true表示节点数组可以是一位结构
                        pIdKey: 'parentId'  //设置自定义的父id属性名
                    }/*,
                    key: {
                        title: 'title'
                    }*/
                },
                callback: {
                    //回调
                    onClick: this.onClick
                },
                view: {
                    //    显示设置
                    fontCss: this.fontCss/*{'color':'red'}*/
                }
            },
            nodes: [],//公司节点树
            name:'全部', //显示office名字
            params:{
            //    提交后台的参数对象
                officeId:'',
                name:'',
                type:''
            },
            input:'', //搜索框
            pageInfo:{
                current:1,
                size:5
            }
        }

    },
    methods: {
        select: function (current, size) {
            //查询后台，返回分页数据，更新vue的pageInfo对象
            axios({
                url: `/manager/examine/select/${current}/${size}`,
                params:this.params
            }).then(response => {
                //箭头函数会将上下文的this（vue对象）传递过来
               // console.log(response);//获取ResultBean
                //response.data ->ResultBean<Page> ResultBean.data ->Page对象   列表数据->Page对象.records
                this.pageInfo = response.data.data;//获取ResultBean中的data
                // console.log(this.pageInfo) 查看pageInfo
            }).catch(function (error) {
                console.log(error);
            })
        },
        selectAll:function () {
        //    查询所有，不带条件
            this.params ={
                officeId:'',
                name:'',
                type:''
            }
        this.select(1,this.pageInfo.size);
        },


        /**
         * ztree开发流程：
         * 1.声明配置setting对象
         * 2.声明配置setting对象
         * 3.根据配置节点和节点对象，创建ztree对象
         * $fn.zTree.init(需要挂载树的dom节点对象，配置对象，节点数组对象)
         * 树初始化方法
         */
        initTree: function () {
            axios({
                url:'/manager/company/list'
            }).then(response=>{
                    this.nodes = response.data.data;
                //    动态生成一个父节点
                this.nodes[this.nodes.length] = {id:0,name:'全部机构',open:true};
                let tree = $.fn.zTree.init($('#pullDownTreeone'), this.setting, this.nodes);
                /*         console.log(tree);
         console.log(tree.getNodes())*/
                }
            )


        },
        onClick: function (event, treeId, treeNode) {
            /*       console.log(event);//事件对象
                   console.log(treeId);//id ul的id*/
           // console.log(treeNode);//树的节点，触发点击事件的节点
            this.name = treeNode.name;
            if (treeNode.id != 0){
                // 全部则不需要指定officeId
                this.params.officeId = treeNode.id;
            }

        },
        search: function () {
            //    1.根据搜索框输入的内容，从ztree的所有节点中进行模糊匹配，找到相关节点
            //    a.获取树节点
            let zTreeObj = $.fn.zTree.getZTreeObj("pullDownTreeone");
            //    b.模糊查询节点
            let fuzzyNodes = zTreeObj.getNodesByParamFuzzy("name", this.input);
          //  console.log(fuzzyNodes)

            //设置还原所有高亮属性为false
            //transformToArray 将多维结构的节点数组转换为简单的一维结构
            var treeNodes = zTreeObj.transformToArray(zTreeObj.getNodes());
            for (let i = 0; i < treeNodes.length; i++) {
                treeNodes[i].heightLight=false;
                zTreeObj.updateNode(treeNodes[i]);
            }
            //设置指定节点高亮
            //    2.高亮显示
            for (let i = 0; i < fuzzyNodes.length; i++) {
                //    a.找出树中对应的节点，设置高亮属性的highLight为true，更新树
                console.log(fuzzyNodes[i])
                fuzzyNodes[i].heightLight = true;
                zTreeObj.updateNode(fuzzyNodes[i]);


            }
            //    b.设置显示样式，如果带有高亮属性的则为红色字体
        },
        fontCss: function (treeId, treeNode) {
            /**
             * 根据传入的树id，树节点参数，进行判断，设置不同的显示样式‘’
             * 每个节点显示的时候都会调用当前方法进行判断
             */
            return treeNode.heightLight?{color: 'red'}:{color: 'black'}

        }
    },

    created: function () {
    //    this.select(this.pageInfo.current, this.pageInfo.size);//在vue创建后调用函数返回数据
    },
    mounted: function () {
        this.initTree();
    }
});